﻿
@{
    Layout = "_LayoutPopups";
    ViewData["Title"] = "Index";
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>事件倒计时</legend>
</fieldset>
<form class="layui-form layui-form-pane" asp-action="Index">
    <div class="layui-form-item">
        <label class="layui-form-label">事件</label>
        <div class="layui-input-block">
            <input type="text" name="title" autocomplete="off" placeholder="距离过年还有" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择日期</label>
            <div class="layui-input-block">
                <input type="text" name="test1" id="test1" autocomplete="off" class="layui-input" value="2020-01-01 00:00:00">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn">记录</button>
        </div>
    </div>
</form>
<blockquote class="layui-elem-quote" style="margin-top: 10px;">
    您的事件距离还有<h3 id="test2"></h3>
</blockquote>

@section scripts{
    <script>
        layui.use(['util', 'laydate', 'layer'], function () {
            var util = layui.util
                , laydate = layui.laydate
                , $ = layui.$
                , layer = layui.layer;


            //倒计时
            var thisTimer, setCountdown = function (y, M, d, H, m, s) {
                var endTime = new Date(y, M || 0, d || 1, H || 0, m || 0, s || 0) //结束日期
                    , serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

                clearTimeout(thisTimer);
                util.countdown(endTime, serverTime, function (date, serverTime, timer) {
                    var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
                    lay('#test2').html(str);
                    thisTimer = timer;
                });
            };
            setCountdown('@ViewBag.NowYear', 1, 1);

            laydate.render({
                elem: '#test1'
                , type: 'datetime'
                , done: function (value, date) {
                    setCountdown(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds);
                }
            });

        });
    </script>
}